/*
 * @Description: loading指令
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-14 10:40:51
 * @LastEditTime: 2021-07-14 11:49:48
 */
import { Directive, App } from 'vue'
import { createLoading } from '@/entry_desktop/components/Loading'

const loadingDirective: Directive = {
	mounted(el, binding) {
		const tip = el.getAttribute('loading-tip')
		const background = el.getAttribute('loading-background')
		const size = el.getAttribute('loading-size')
		const fullscreen = !!binding.modifiers.fullscreen
		const instance = createLoading(
			{
				tip,
				background,
				size: size || 'large',
				loading: !!binding.value,
				absolute: !fullscreen,
			},
			fullscreen ? document.body : el
		)
		el.instance = instance
	},
	updated(el, binding) {
		const instance = el.instance
		if (!instance) return
		instance.setTip(el.getAttribute('loading-tip'))
		if (binding.oldValue !== binding.value) {
			if (binding.oldValue !== binding.value) {
				instance.setLoading?.(binding.value && !instance.loading)
			}
		}
	},
	unmounted(el) {
		el?.instance?.close()
	},
}

export function setupLoadingDirective(app: App) {
	app.directive('loading', loadingDirective)
}

export default loadingDirective
